import React, { useState, useEffect } from 'react';
import { onDataReceived } from '../../services/satelliteService';
import { Notification } from '@douyinfe/semi-ui';

function LogNotification() {
    const [logs, setLogs] = useState([]);
    
    // 订阅卫星数据更新事件
    useEffect(() => {
        // 格式化日期时间
        const formatDateTime = (date) => {
            return new Date(date).toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            });
        };

        // 数据接收监听器
        const handleDataReceived = (data, system) => {
            console.log("数据接收监听器", data);
            const timestamp = Date.now();
            const formattedTime = formatDateTime(timestamp);

            // 创建日志消息
            const logMessage = `${formattedTime} - ${system || '全部'}卫星系统测试日志`;

            // 添加新日志到状态
            setLogs(prevLogs => [
                { id: timestamp, message: logMessage, type: 'info' },
                ...prevLogs
            ].slice(0, 50)); // 只保留最新50条日志
        };

        // 订阅数据更新
        const unsubscribe = onDataReceived(handleDataReceived);

        // 组件卸载时取消订阅
        return () => unsubscribe();
    }, []);
    
    return (
        <div style={{ 
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
        }}>
            <div style={{
                padding: '8px',
                borderBottom: '1px solid #eee',
                fontWeight: 'bold',
                backgroundColor: '#f5f5f5',
            }}>
                实时日志
            </div>
            <div style={{ 
                flex: 1,
                padding: '16px',
                boxSizing: 'border-box',
                overflow: 'auto'  // 添加滚动条防止高度溢出
            }}>
                {logs.map(log => (
                    <div key={log.id} style={{ 
                        marginBottom: '8px',
                        color: log.type === 'error' ? 'red' : 
                              log.type === 'warning' ? 'orange' : 'green'
                    }}>
                        {log.message}
                    </div>
                ))}
            </div>
        </div>
    );
}

export default LogNotification;